<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
    <style>
        #progress-bar {
            width: 100%;
            background-color: #f3f3f3;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
        }
        #progress-bar div {
            height: 24px;
            width: 0;
            background-color: #4caf50;
            text-align: center;
            color: white;
            line-height: 24px;
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <h2>File Upload Test</h2>
    <form id="upload-form" enctype="multipart/form-data">
        <div class="mb-3">
            <label for="file" class="form-label">Select file to upload:</label>
            <input type="file" class="form-control" id="file" name="file">
        </div>
        <button type="button" class="btn btn-primary" onclick="uploadFile('/upload')">Upload File</button>
        <button type="button" class="btn btn-secondary" onclick="uploadFile('/upload2')">Upload File (URL)</button>
        <button type="button" class="btn btn-success" onclick="uploadFile('/upload-image')">Upload Image</button>
        <button type="button" class="btn btn-info" onclick="uploadFile('/upload-platform')">Upload to Platform</button>
        <button type="button" class="btn btn-warning" onclick="uploadFile('/upload-request')">Upload from Request</button>
    </form>
    <div id="progress" class="mt-3">
        <div id="progress-bar"><div id="progress-text">0%</div></div>
    </div>
    <div id="response" class="mt-3"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script>
    function updateProgress(percentComplete) {
        const progressBar = document.getElementById('progress-bar').firstElementChild;
        progressBar.style.width = percentComplete + '%';
        document.getElementById('progress-text').innerText = percentComplete + '%';
    }

    function uploadFile(url) {
        const formData = new FormData();
        const fileInput = document.getElementById('file').files[0];
        formData.append('file', fileInput);

        const xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);

        // Track the progress of the file upload
        xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                const percentComplete = Math.round((event.loaded / event.total) * 80); // Show only the first 50% progress
                updateProgress(percentComplete);
            }
        };

        // Handle response
        xhr.onload = function() {
            if (xhr.status === 200) {
                document.getElementById('response').innerHTML = '<p>Response: ' + xhr.responseText + '</p>';
                // Complete the progress to 100% after response is received
                updateProgress(100);
            } else {
                document.getElementById('response').innerHTML = '<p>Error: ' + xhr.status + ' - ' + xhr.statusText + '</p>';
            }
        };

        xhr.onerror = function() {
            document.getElementById('response').innerHTML = '<p>Error: Network Error</p>';
        };

        xhr.send(formData);
    }
</script>
</body>
</html>
